import React, { Component,Fragment } from 'react';
import { Radio,Button } from 'antd';
import MenuItem from './menu-item';
import "./index.scss";
import {API_LIST} from "../../common/js/api";

export default class Index extends Component {
        constructor(props) {
                super(props);
                this.state = {
                        currentMenuType: 'manager',
                        menuList: []
                }
        }

        goToHome() {
                this.props.history.push('/home');
        }

        menuTypeChange = (e) => {
                this.setState({
                        currentMenuType : e.target.value
                })
        }

        doAdd = () => {
                console.log('add')
        }

        componentDidMount() {
                this.fetchMenu();
        }

        fetchMenu = () => {
                this.request({
                        url: API_LIST.menu.tree,
                        tip: true,
                        params: {
                                type : this.state.currentMenuType
                        },
                        callback: (data) => {
                                this.setState({
                                        menuList: data
                                })
                        },
                        error: (data) => {
                                this.setState({
                                        menuList: data
                                })
                        }
                });
        }

        render() {
                return (
                    <Fragment>
                            <div className="btn-wrapper">
                                    <Radio.Group
                                        value={this.state.currentMenuType}
                                        defaultValue="manager"
                                        buttonStyle="solid"
                                        className="classify"
                                        onChange={(e) => this.menuTypeChange(e)}>
                                            <Radio.Button value="user">前台菜单</Radio.Button>
                                            <Radio.Button value="manager">后台菜单</Radio.Button>
                                    </Radio.Group>
                                    <Button className="btn-success" icon={<i className="iconfont iconjia"></i>} onClick={this.doAdd}>
                                            新增一级菜单
                                    </Button>
                            </div>
                            <div className="menu-tree-wrapper">
                                    <div className="menu-tree-item">
                                            <div className="menu-tree-header">
                                                    <MenuItem></MenuItem>
                                            </div>
                                            <div className="menu-tree-content">
                                                    <div className="menu-content-item">
                                                            <MenuItem></MenuItem>
                                                    </div>
                                                    <div className="menu-content-item">
                                                            <MenuItem></MenuItem>
                                                    </div>
                                                    <div className="menu-content-item">
                                                            <MenuItem></MenuItem>
                                                    </div>
                                            </div>
                                    </div>
                            </div>
                    </Fragment>
                )
        }
}
